<script lang="ts" setup>
import store from '../../pina'

defineProps({
  /**
   * 分页参数
   * @param page {pageType}
   */
  page: {type: Object, default: undefined},
  /**
   * 请求条数
   * @param pageSize {number}
   */
  pageSize: {type: Number, default: 10},
  /**
   * 当前页数
   * @param pageCurrent {number}
   */
  pageCurrent: {type: Number, default: 1},
  /**
   * 总条数
   * @param total {number}
   */
  total: {type: Number, default: 0},
  /**
   * 每页显示个数选择器的选项设置
   * @param pageSizes {number[]}
   */
  pageSizes: {type: Array, default: () => [5, 10, 20, 30, 50, 100, 200]},
  /**
   * 是否禁用
   * @param disabled {BooleanType}
   */
  disabled: {type: Boolean, default: false},
  /**
   * 是否使用小型分页样式
   * @param small {BooleanType}
   */
  small: {type: Boolean, default: false},
  /**
   * 是否为分页按钮添加背景色
   * @param background {BooleanType}
   */
  background: {type: Boolean, default: true},
  /**
   * 只有一页时是否隐藏
   * @param background {BooleanType}
   */
  hideOnSinglePage: {type: Boolean, default: false},
  /**
   * 每页显示个数选择器的下拉框类名
   * @param popperClass {string}
   */
  popperClass: {type: String, default: ''},
  /**
   * 组件布局，子组件名用逗号分隔
   * @param layout {string}
   */
  layout: {type: String, default: 'total,sizes,prev,pager,next,jumper'},
  /**
   * 自定义类属性
   * @param CustomClass {string}
   */
  CustomClass: {type: String, default: ''},
  /**
   * 是否启动默认类属性
   * @param isDefaultClass {BooleanType}
   */
  isDefaultClass: {type: Boolean, default: true},
  /**
   * 文本显示方式,需要设置isDefaultClass为true
   * @param textAlign {string}
   */
  textAlign: {type: String, default: 'right'}
})
const
    $emit = defineEmits(["size-change", "current-change", "prev-click", "next-click"]),
    pina = store()
;

function sizeChange(size: any) {
  $emit('size-change', size)
}

function currentChange(current: any) {
  $emit('current-change', current)
}

function prevClick(prev: any) {
  $emit('prev-click', prev)
}

function nextClick(next: any) {
  $emit('next-click', next)
}
</script>

<template>
    <el-pagination :background="background" :class="[CustomClass, isDefaultClass ? 'wh-pagination' : '']"
                   :current-page="undefined === page ? pageCurrent : page.current || pageCurrent" :disabled="disabled"
                   :hide-on-single-page="hideOnSinglePage" :layout="small ? 'prev, pager, next' : layout"
                   :page-size="undefined === page ? pageSize : page.size || pageSize" :page-sizes="pageSizes"
                   :popper-class="popperClass"
                   :small="small" :total="total" @size-change="sizeChange" @current-change="currentChange"
                   @prev-click="prevClick"
                   @next-click="nextClick"/>
</template>

<style lang="scss" scoped>
.wh-pagination {
  text-align: v-bind('textAlign');
  margin: 10px 0 0 0;
}
</style>
